<template>
  <div class="layout">
    <div v-if="cartStore.cartList.length > 0">
      <div class="goodsInfo">
        <div class="titleBar">
          <ul class="list">
            <el-checkbox
              :model-value="cartStore.isAll"
              @change="checkAllChange"
              style="padding-left: 105px"
            >
            </el-checkbox>
            <li class="info">商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
          </ul>
        </div>
        <el-scrollbar height="500px">
        <div class="content" v-for="item in cartStore.cartList" :key="item">
          <el-checkbox
            style="padding-left: 100px"
            :model-value="item.selected"
            @change="(selected)=>checkedItem(item,selected)"
          >
          </el-checkbox>
          <div class="left_info">
            <div class="img">
              <img v-img-lazy="item.picture" />
            </div>
            <div class="info">
              <p class="title">{{ truncateText(item.name, 10) }}</p>
              <p class="desc">{{ truncateText(item.attrsText, 10) }}</p>
            </div>

            <p style="padding-left: 245px; width: 50px">{{ item.price }}</p>
            <el-input-number
              v-model="item.count"  
              :min="1"
              style="margin-left: 240px; width: 150px"
            />
            <p
              style="
                padding-left: 190px;
                color: red;
                font-weight: bold;
                width: 50px;
              "
            >
              {{ (item.price * item.count).toFixed(2) }}
            </p>
            <el-button
              type="danger"
              style="margin-left: 280px"
              @click="delCart(item.skuId)"
              >删除</el-button
            >
          </div>
        </div>
      </el-scrollbar>
      </div>
      <div class="bottom">
        <h3 class="total_info">
          共 {{ cartStore.cartList.length }} 件商品,已选择 {{ cartStore.selectedCount.length }} 件,一共
          <span style="color: red">{{ cartStore.totalAmount.toFixed(2) }}</span> 元
          <p class="clear" @click="cartStore.clearList">清空购物车</p>
        </h3>
        <el-button @click="go_pay">立即结算</el-button>
      </div>
    </div>

    <el-empty description="购物车空空如也~" v-else>
      <el-button style="background: #57ecd8; color: white; padding: 20px" @click="$router.push('/')"
        >这就去BUYBUYUBUY吧~</el-button
      >
    </el-empty>
  </div>
</template>

<script setup>
import { useCartStore } from "@/stores/cartStore";
import { truncateText } from "@/utils/truncateText";
import { ElMessage, ElMessageBox } from 'element-plus'
import "element-plus/dist/index.css";
import { useUserStore } from '@/stores/user'
import { useRouter } from "vue-router";
import { computed } from 'vue'

const cartStore = useCartStore();
//判断是否登录
const userStore = useUserStore()
const isLogin = computed(()=>userStore.userInfo.token) 
 
const router = useRouter()

//全选
const checkAllChange = (selected) => {
  cartStore.selectedAll(selected)
};
//单选回调
const checkedItem = (item,selected) => {
  //修改store中carrList中skuId的值
  cartStore.signChecked(item.skuId,selected)
};

//删除
const delCart = (skuId)=>{
  cartStore.delCart(skuId)
  ElMessage({type:'warning',message:'删除成功'})
}

//结算
const go_pay = ()=>{
  if(isLogin.value){
    console.log('请支付');
    router.push('/checkout')
  }else{
    ElMessageBox.confirm(
    '您还未登录,请先登录!!!',
    'Warning',
    {
      confirmButtonText: '立即登入',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      router.push({
        path: '/login',
        query: { status: true }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.layout {
  .goodsInfo {
    width: 100%;
    background: white;
    margin: 10px 0;
    .titleBar {
      .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        .info {
          width: 500px;
          text-align: center;
          padding: 30px;
        }
        li {
          padding-right: 120px;
        }
      }
    }
    .content {
      display: flex;
      align-items: center;
      padding: 5px;
      width: 1400px;
      margin-top: 10px;
      .left_info {
        display: flex;
        align-items: center;  
        margin-left: 220px;
        .img {
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          }
        }

        .info {
          padding-left: 30px;
          width: 200px;
          .title {
            font-size: 14px;
            font-weight: bold;
          }

          .desc {
            padding-top: 10px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    background: white;
    margin: 10px 0;
    .total_info {
      padding: 30px 100px;
      .clear{
        cursor: pointer;
        margin:20px 50px;
        &:hover{
          color: #8febcc;
        }
      }
    }
    .el-button {
      width: 100px;
      margin:0 80px;
      background: #32cd99;
      color: white;
    }
  }
}
</style>